<template>
  <transition name="slide">
    <div class="container">
        <div class="box">
	        <mt-header title="房源推荐" class='detail-header'>
			      <router-link to="/" slot="left">
			    <mt-button icon="back"></mt-button>
				  </router-link>
	 		    <mt-button icon="more" slot="right"></mt-button>
	        </mt-header>
	      <div class="content">
	      	<div class="chose"><p>{{}}</p><p>{{}}</p><p>{{}}</p></div>
	        <ul>
	        	<li>
	        		 <span>请选择城市</span>
	        		 <div class="wrapper-li">
	        		 	<router-link to="/city" tag="label">
		           			上海
		          </router-link>
		          <span class='iconfont icon-qianjin'></span>
	        		 </div>
	        	</li>
	        	<li>
	        		<mt-field label='请选择入住日期' type="date" style='font-size:12px;color:#000;border-top:none'></mt-field>
	        	</li>
	        	<li>
	        		<mt-field label='请选择离开日期' type="date"  style='color:#000;font-size:12px;'></mt-field>
	        	</li>
	        	<li>
	        		<span>搜索酒店/地名/关键词</span>
	        	</li>
	        </ul>
	      </div>
        </div>
    </div>
  </transition>
</template> 

<script>
import { Header,Button } from 'mint-ui';
import Vue from 'vue'
import axios from 'axios'
Vue.component(Header.name, Header,Button);
export default {
 data () {
    return {
      title: '',
      img: '',
      rating: '',
      id:this.$route.params.id
    }
  },
//  mounted () {
//	    console.log(this.$route)
//	    const { id } = this.$route.params
//  	fetch(`/daxun/detail?id=${id}`).then(res => res.json())
//    		.then(data => {
//      		console.log(data)
//      		this.title = data[0].title
//      		this.img = data[0].images.small
//    		}
//    	)
//  }
created () {
    const id = this.$route.params.id
    axios.get(`/daxun/index?id=${id}`)
      .then(data => {
        console.log(data)
        const obj = data.data[0]
        this.title = obj.title
        this.img = obj.images.small
        this.rating = obj.rating.average
      })
  }
}
</script>
<style lang='scss' scoped>	
@import '@/lib/reset.scss';
.rate{
	color:#f66;
}
.mint-header{
	height: 44px;
	background:#f70;
}
.mint-cell-wrapper{
	width:320px;
	border:none
}
.chose{
	border-bottom:1px solid #CECECE; 
}
ul{
	li{
		@include rect(100%,0.56rem);
		@include flexbox();
		justify-content:center;
		@include flex-direction(column);
		.wrapper-li{
		@include rect(100%,0.16rem);
		@include flexbox();
		justify-content:space-between;
}
	}
}
</style>
